<template>
  <div>
    <video
      style="width: 100%; height: 100%; position: absolute; z-index: -100"
      autoplay
      src="../../assets/videos/VCG42N1498098426.mp4"
      muted
      loop
    ></video>
    <div class="reg">
      <h2 style="color: ; font-weight: 400">账号注册</h2>
      <!-- 表单 -->
      <van-form>
        <van-field
          class="phone"
          v-model="phone"
          name="手机号"
          placeholder="请填写手机号"
          left-icon="icon iconfont icon-shouji1"
          :rules="[
            {
              required: true,
              pattern: /^1[3-9]\d{9}$/,
              message: '请填写正确的手机号格式',
            },
          ]"
        />

        <van-field
          class="pwd"
          v-model="pwd"
          type="password"
          name="密码"
          placeholder="请设置登录密码"
          left-icon="icon iconfont icon-mima"
          :rules="[
            {
              required: true,
              pattern: /\w{6,15}/,
              message: '密码格式为6~15位的密码',
            },
          ]"
        />
        <p class="xy">
          <van-checkbox v-model="checked" icon-size="14px" checked-color="green"
            >我已阅读并同意《用户注册协议》</van-checkbox
          >
        </p>

        <div style="width: 100%">
          <van-button
            class="zc"
            round
            block
            type="info"
            :disabled="!checked"
            native-type="submit"
            @click="registerUser"
            >立即注册</van-button
          >
        </div>
        <div style="width: 100%">
          <van-button
            class="dl"
            round
            block
            type="info"
            @click="$router.push('/login')"
            >已有账号，立即登录</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import httpApi from "@/http";

export default {
  data() {
    return {
      phone: "",
      pwd: "",
      checked: false,
    };
  },
  methods: {
    registerUser() {
      let params = {
        phone: this.phone,
        upwd: this.pwd,
      };

      if (this.phone && this.pwd) {
        httpApi.userApi.register(params).then((res) => {
          // console.log(res);
          if (res.data.code == 200) {
            Toast({
              message: "注册成功",
              position: "bottom",
              duration: 1000,
            });
            setTimeout(() => {
              this.$router.push(`/login`);
            }, 500);
          } else {
            Toast({
              message: "手机号已注册",
              position: "bottom",
              duration: 1000,
            });
          }
        });
      } else {
        Toast({
          message: "用户名或密码有误",
          position: "bottom",
          duration: 1000,
        });
      }
    },
  },
};
</script>

<style scoped>
.reg {
  padding: 130px 40px 0 40px;
}

.reg h2 {
  margin-bottom: 20px;
  color: #333;
}

.phone,
.email,
.pwd {
  height: 40px;
  background-color: rgba(9, 9, 9, 0.3);
  border-radius: 100px;
  margin: 0 0 20px;
  overflow: visible;
}

.reg .zc,
.dl {
  background-color: #9c8be9;
  border: none;
  margin-bottom: 20px;
  width: 100%;
}

.reg .xy {
  font-size: 12px;
}
</style>
